<template>
  <div>
    <div class="criticalCustomerShare" :style="'background-color:' + qRCodeData.color">
      <div>
        <img :src="qRCodeData.banner" style="width: 100%;" />
      </div>
      <div class="content">
        <div class="list">
          <div v-for="(item, index) in shareFigure" :key="index" style="display: flex;">
            <div :style="'background-color:' + item.bgColor" class="icon">
              <div :class="item.url" :style="'color:' + item.imageColor" style="font-size: 25px;"></div>
              <div class="text">{{ item.name }}</div>
            </div>
            <div class="iconifnext" v-if="index != shareFigure.length - 1">
              <div class="iconfont icon-advertise-next" style="color: #c5c5c5; font-size: 20px;"></div>
              <div class="iconfont icon-advertise-next" style="color: #c5c5c5; margin-left: -10px; font-size: 20px;"></div>
            </div>
          </div>
        </div>
        <div class="circle">
          <div style="display: flex;" v-for="(item, index) in 2" :key="index">
            <div :style="'background-color:' + qRCodeData.color + ';width: 11px;height: 11px;border-radius: 30px;'"></div>
            <div :style="'background-color:' + qRCodeData.color + ';width: 11px;height: 11px;border-radius: 30px;margin-left: 3px;'"></div>
          </div>
        </div>
      </div>
      <div class="contentCode">
        <!-- 圆圈和白色直线 -->
        <div class="circle">
          <div style="display: flex;" v-for="(item, index) in 2" :key="index">
            <div :style="'background-color:' + qRCodeData.color + ';width: 11px;height: 11px;border-radius: 30px;'"></div>
            <div :style="'background-color:' + qRCodeData.color + ';width: 11px;height: 11px;border-radius: 30px;margin-left: 3px;'"></div>
          </div>
        </div>
        <div v-for="(item, index) in leftWire" :key="index" :style="'width: 7px;height: 32px;background-color: white;position: absolute;top: -22px;border-radius: 30px;left:' + item"></div>
        <div v-for="(item, index) in rightWire" :key="index" :style="'width: 7px;height: 32px;background-color: white;position: absolute;top: -22px;border-radius: 30px;right:' + item"></div>
        <!-- 二维码以及边框-->
        <div class="d-cc-c">
          <div class="dv" :style="'border: 1px solid' + qRCodeData.color">
            <span class="border row1" :style="'border-color:' + qRCodeData.color"></span>
            <span class="border row2" :style="'border-color:' + qRCodeData.color"></span>
            <span class="border col1" :style="'border-color:' + qRCodeData.color"></span>
            <span class="border col2" :style="'border-color:' + qRCodeData.color"></span>
          </div>
          <img :src="qRCodeData.code_url" style="width: 160px; height: 160px; margin-top: -180px; z-index: 99;" />
        </div>
        <div :style="'color:' + qRCodeData.color" class="text">使用微信扫描二维码</div>
      </div>
      <div class="code-content" v-html="qRCodeData.explain">
      </div>
      <div class="mb-50"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      business_id: "", //企业id
      code_id: "", //爆客id
      qRCode: false, //是否显示二维码
      qRCodeData: {}, //二维码页面数据
      leftWire: ["42px", "56px"], //左边竖线偏移距离
      rightWire: ["43px", "57px"], //右边竖线偏移距离
      shareFigure: [
        {
          name: "识别二维码",
          url: "iconfont icon-erweima",
          imageColor: "#fe9a03",
          bgColor: "#fff8ed"
        },
        {
          name: "加好友",
          url: "iconfont icon-fontclass-jiahaoyou",
          imageColor: "#2f9cff",
          bgColor: "#eef8fe"
        },
        {
          name: "获取链接",
          url: "iconfont icon-ht_operation_copyline",
          imageColor: "#3c6eff",
          bgColor: "#eff3ff"
        }
      ],
    };
  },
  components: {},

  computed: {},

  mounted() {
    // this.getData()
  },
  created() {
    if (this.$route.query.code_id) {
      this.code_id = this.$route.query.code_id;
    }
    if (this.$route.query.business_id) {
      this.business_id = this.$route.query.business_id;
    }
    if (!this.$route.query.code_id && !this.$route.params.scene_data) {
      // 不是扫码（即是通过场景跳转进入，可能刷新页面导致params丢失）
      try {
        this.$router.go(-1);
      } catch (error) {
        this.$router.push(this.fun.getUrl("home", {}));
      }
      return;
    }
    this.getData();
  },
  methods: {
    //获取扫码首页数据
    getData() {
      $http
        .post("plugin.drainage-code.frontend.controllers.code", {
          business_id: this.business_id || 0,
          code_id: this.code_id || 0,
          scene_data: this.$route.params.scene_data||{}
        })
        .then(response => {
          if (response.result == 1) {
            let data = response.data;
            console.log(response.data.is_old);
            if (!response.data.is_old) {
              this.qRCodeData = response.data;
              this.qRCode = true;
              this.fun.setWXTitle(response.data.code_name);
            } else {
              window.location.href = response.data.content.link?.link;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.code-content {
  background-color: #fff;
  margin:0.625rem;
  border-radius: 0.4375rem;
  padding: 0.625rem;
  text-align: left;
}
.btn {
  width:100px;
  height: 100px;
}
.mb-50 {
  height: 3.125rem;
  clear: both;
}
 ::v-deep .code-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.criticalCustomerShare {
  padding-bottom: 20px;
  min-height: 100vh;
  height: 100%;
}

.criticalCustomerShare .content {
  background-color: white;
  border-radius: 7px;
  margin: 10px;
  padding: 17px;
  height: 120px;
}

.criticalCustomerShare .content .list {
  display: flex;
  justify-content: space-between;
}

.criticalCustomerShare .content .circle {
  margin-top: 14px;
  padding-left: 23px;
  padding-right: 24px;
}

.criticalCustomerShare .content .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 75px;
  height: 75px;
  border-radius: 5px;
}

.criticalCustomerShare .content .text {
  margin-top: 5px;
  font-size: 11px;
}

.criticalCustomerShare .content .iconif {
  font-size: 20px;
}

.criticalCustomerShare .content .iconifnext {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.7rem;
}

.criticalCustomerShare .contentCode {
  background-color: white;
  position: relative;
  border-radius: 7px;
  margin: 10px;
  margin-top: 10px;
  height: 300px;
  padding: 1px 10px 10px 10px;
}

.criticalCustomerShare .contentCode .dv {
  position: relative;
  margin-top: 35px;
  width: 200px;
  height: 200px;
}

.criticalCustomerShare .contentCode .text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  font-size: 12px;
}

.circle {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding-right: 31px;
  padding-left: 30px;
}

.border {
  position: absolute;
  padding: 5px;
  border-style: solid;
}

.row1 {
  border-width: 3px 0 0 3px;
  height: 25px;
  width: 25px;
  top: -2px;
  left: -2px;
}

.row2 {
  border-width: 3px 3px 0 0;
  height: 25px;
  width: 25px;
  top: -2px;
  right: -2px;
}

.col1 {
  border-width: 0 0 3px 3px;
  height: 25px;
  width: 25px;
  bottom: -2px;
  left: -2px;
}

.col2 {
  border-width: 0 3px 3px 0;
  height: 25px;
  width: 25px;
  bottom: -2px;
  right: -2px;
}

.d-cc-c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
